<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="un"><br>
  <input type="text" class="pw"><br>
  <input type="button" class="btn" value="登录">
</body>
<script>
  const url1 = "http://127.0.0.1:5500/day26/data/hello123.txt";

  function ajaxGet({url, success, error, data}){
    // 1. 接收并解析请求数据
    let str = ""
    for(let i in data){
      str += `${i}=${data[i]}&`
    }
    // 2. 拼接到url
    url = url + "?" + str.slice(0, -1);
    // 3. 开启ajax请求
    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();
    xhr.onreadystatechange = function(){
      // 4. 监听状态，在成功或失败时执行对应的处理
      if(xhr.readyState === 4 && xhr.status === 200){
        success(xhr.responseText);
      }else if( xhr.readyState === 4 && xhr.status !== 200 ){
        error && error(xhr.status);
      }
    }
  }

  // 自定义url内容，自定义请求成功和失败后的处理
  
  $(".btn").onclick = function(){
    ajaxGet({
      url:"http://localhost:3000/login",
      success:(res)=>{
        console.log(res)
      },
      error:(code)=>{
        console.log(code)
      },
      data:{
        username:$(".un").value,
        password:$(".pw").value
      }
    });
  }


  function $(s){
    return document.querySelector(s)
  }

  
</script>
</html>